<template>
  <a-table
    ref="arud"
    v-model="searchForm"
    v-model:form="form"
    :data="tableData"
    :option="options"
    :total="total"
    :pageSizes="[20, 40]"
    :hasRequest="hasRequest"
    v-model:page="searchFormPage.page"
    v-model:limit="searchFormPage.pageSize"
    @row-save="rowSave"
    @row-update="rowUpdate"
    @row-del="rowDel"
    @handleSelectionChange="handleSelectionChange"
    @handleRadioChange="handleRadioChange"
    @on-load="getTtsList"
    @pagination="getTtsList"
    @onQuery="onQuery"
    @onReset="onReset"
  >
    <!-- 自定义搜索按钮 -->
    <template #searchMenu>
      <el-button type="" @click="onReset">reset</el-button>
      <el-button type="primary" @click="onQuery">Query</el-button>
    </template>
    <!-- 自定义单个搜索组件 -->
    <template #nameSearch>
      <el-input
        v-model="searchForm.inputForm"
        placeholder="请输入input"
      ></el-input>
    </template>
    <!-- 自定义单个form组件 -->
    <template #nameForm="{ disabled, readonly }">
      <el-input
        v-model="form.name"
        :disabled="disabled"
        placeholder="请输入姓名"
      ></el-input>
    </template>
    <template #dateForm="{ disabled, readonly }">
      <el-switch
        v-model="form.date"
        active-value="1"
        inactive-value="0"
        active-text="在线"
        inactive-text="离线"
      />
    </template>
    <!-- 自定义插槽#header-left -->
    <template #header-left>
      <el-button type="primary">保存</el-button>
    </template>
    <!-- 自定义插槽#header-right -->
    <template #header-right>
      <el-button type="primary">导出</el-button>
    </template>
    <!-- 自定义插槽#nameLabel -->
    <template #nameLabel>
      <span style="color: #f56c6c; margin-right: 4px">*</span>名称
    </template>

    <!-- 自定义单个表格栏 -->
    <template #city="{ row, index }">
      <el-tag type="primary">{{ getVal(row.city) }}</el-tag>
    </template>
    <!-- 自定义插槽#menu -->
    <template #menu="{ row, index }">
      <el-button @click="arud.update(row)">编辑</el-button>
      <el-button @click="handleDown(row)">下载</el-button>
    </template>

    <!-- 自定义插槽弹窗按钮 -->
    <template #footerDialog="{ type }">
      <el-button
        v-if="type == 'add' || type == 'edit'"
        @click="arud.handleClose()"
        >取消</el-button
      >
      <el-button v-if="type == 'add'" type="primary" @click="arud.rowSave()"
        >创建</el-button
      >
      <el-button v-if="type == 'add'" type="primary" @click="arud.rowSave()"
        >暂存</el-button
      >
      <el-button v-if="type == 'edit'" type="primary" @click="arud.rowUpdate()"
        >编辑</el-button
      >
      <el-button v-if="type == 'view'" @click="arud.handleClose()"
        >关闭</el-button
      >
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import ATable from "@/components/aTable";
import func from "../../../vue-temp/vue-editor-bridge";
const arud = ref();
const searchForm = ref({
  name: "",
});
const searchFormPage = ref({
  page: 1,
  pageSize: 20,
});

const form = ref({
  // name: "jack",
  date: "1",
});
const raidoCount = ref(null);
const total = ref(0);
const hasRequest = ref(false);
const tableData = ref([
  {
    date: "1",
    name: "Tom",
    city: ["1", "2", "3"],
    address: "No. 189, Grove St, Los Angeles",
    sex: 2,
  },
  {
    date: "1",
    name: "Tom",
    city: ["1", "2", "3"],
    address: "No. 189, Grove St, Los Angeles",
    sex: 2,
  },
  {
    date: "1",
    name: "Tom",
    city: ["3", "2", "3"],
    address: "No. 189, Grove St, Los Angeles",
    sex: 1,
  },
  {
    date: "0",
    name: "Tom",
    city: ["1", "2", "3"],
    address: "No. 189, Grove St, Los Angeles",
    sex: 2,
  },
]);

let cityList = [
  { label: "南京", value: "1" },
  { label: "上海", value: "2" },
  { label: "北京", value: "3" },
  { label: "深圳", value: "4" },
];

// 自定义插槽的展示值示例
const getVal = computed(() => {
  return (city) => {
    let list = [];
    cityList.forEach((item) => {
      city.forEach((it) => {
        if (item.value == it) {
          list.push(item.label);
        }
      });
    });
    return (city = list?.join("|"));
  };
});

const options = computed(() => {
  return {
    stripe: true, // 表格状态
    border: true, // 表格边框
    index: true, // 显隐序号true|false
    indexSort: false, // 切换分页+1页序号true|false
    indexWidth: 70, // 序号宽度
    indexLabel: "序号", // 序号文字
    indexAlign: "center", // 序号位置
    card: true, // 是否开启卡片模式 true | false
    menu: true, // 操作栏显隐 true|false
    menuWidth: "200", // 操作栏宽度设置
    menuAlign: "center", // 操作栏位置
    menuLabel: "操作", // 操作栏文字
    menuFixed: false, // 操作栏是否固定 true|false
    header: true, // 头部按钮显隐 true|false
    queryBtn: false, // 查询按钮 true | false
    resetBtn: false, // 重置按钮 true | false
    addBtn: true, // 新增按钮 true|false
    viewBtn: true, // 操作栏查看按钮 true|false
    editBtn: true, // 操作栏编辑按钮 true|false
    delBtn: true, // 操作栏删除按钮 true|false
    cancelBtn: false, // 新增弹窗取消按钮 true | false
    confirmBtn: false, // 新增弹窗确认按钮 true | false
    editFormBtn: false, // 修改弹窗确认按钮 true | false
    // confirmBtnText: "提交", // 新增弹窗确认按钮更改文字
    // cancelBtnText: '关闭', // 新增弹窗取消按钮更改文字
    // editFormBtnText: '编辑', // 修改弹窗确认按钮更改文字 true | false
    addTips: "", // 新增弹窗更改文字tip
    editTips: "", // 修改弹窗更改文字tip
    viewTips: "", // 查看弹窗更改文字tip
    changeRadio: false, // 是否单选 true|false
    radioWidth: 70, // 单选框宽度
    radioAlign: "center", // 调整单选框位置 left|center|right
    // radioLabel: '单选', // 单选文字
    // rowClick: false, // 控制行是否点击
    selection: false, // 是否多选 true|false
    selectionWidth: 70, // 多选框宽度
    searchForm: true, // 是否显示搜索组件 true|false
    searchSpan: 6, // 搜索组件单个宽度
    searchLabelWidth: 80, // 调整搜索组件文字宽度
    searchLabelPosition: "left", // 调整搜索组件文字位置 left|top|right
    searchShowBtn: false, // 显示搜索展开收缩的按钮 true|false
    maxShowIndex: 2, // 控制搜索框组显示几个不传默认2个
    formLabelWidth: 80, // 表单label宽度 不传默认80
    formLabelPosition: "right", // 调整form组件文字位置 left|top|right
    labelWidthSpan: 12, // form组件单个宽度 不传默认8
    columns: [
      // {
      //   label: "name",
      //   prop: "name",
      //   hide: false, // 状态为true表格栏隐藏, 默认显示
      //   search: true,
      //   multiple: false, // 开启多选 true|false
      //   disabled: false, // 禁用 true|false
      //   readonly: false, // 只读 true|false
      //   viewDisplay: false, // 查看隐藏当前属性 true|false
      //   editDisplay: false, // 修改隐藏当前属性 true|false
      //   addDisplay: false, // 新增隐藏当前属性 true|false
      //   editDisabled: false, // 修改禁用 true|false
      //   editReadonly: false, // 修改只读 true|false
      //   addDisabled: false, // 新增禁用 true|false
      //   addDeadonly: false, // 新增只读 true|false
      //   searchType: "select", // 指定搜素表单的当前组件的状态
      //   type: "select", // 指定form表单的当前组件的状态
      //   dicData: [
      //     { label: "joon", value: "1" },
      //     { label: "jack", value: "2" },
      //   ],
      //   // [{label: '', value: ''}] 固定的数组示例
      //   placeholder: "请选择",
      //   formSlot: false, // 表单自定义插槽 true|false
      // },
      {
        label: "自定义名称",
        prop: "name",
        hide: false, // 状态为true表格栏隐藏, 默认显示
        search: true, // 状态为true开启当前搜索组件，默认隐藏
        searchSlot: true, // 自定义搜索插槽
        formSlot: true, // 自定义表单插槽
        labelSlot: true, // 自定义表单名称插槽
        rules: [{ required: true, message: "名称不能为空", trigger: "blur" }],

        // addDisplay: false,
        // viewDisplay: false,
        // multiple: false, // 开启多选 true|false
        // searchType: "select", // 指定form表单的当前组件的状态
        // type: "select", // 指定form表单的当前组件的状态
        // dicData: [
        //   { label: "joon", value: "1" },
        //   { label: "jack", value: "2" },
        // ],
        // [{label: '', value: ''}] 固定的数组示例
        // placeholder: "请选择",
        align: "center",
      },
      {
        label: "city",
        prop: "city",
        search: true,
        // editDisplay: false,
        placeholder: "请选择",
        align: "center",
        searchType: "select", // 指定form表单的当前组件的状态
        type: "select", // 指定form表单的当前组件的状态
        multiple: true,
        dicData: [
          { label: "南京", value: "1" },
          { label: "上海", value: "2" },
          { label: "北京", value: "3" },
          { label: "深圳", value: "4" },
        ],
        tableSlot: true,
        // align: 'right', // align: 'right', 支持left/center/right位置更改，默认left
      },
      {
        label: "sex",
        prop: "sex",
        search: true,
        // editDisplay: false,
        placeholder: "请选择",
        align: "center",
        searchType: "select", // 指定form表单的当前组件的状态
        type: "select", // 指定form表单的当前组件的状态
        value: 1,
        dicData: [
          { label: "男", value: 1 },
          { label: "女", value: 2 },
        ],
        // tableSlot: true,
        // align: 'right', // align: 'right', 支持left/center/right位置更改，默认left
      },
      {
        label: "date",
        prop: "date",
        searchType: "date", // 定义搜索组件的类型
        type: "date", // 定义表单组件的类型
        search: true,
        placeholder: "请选择",
        align: "center",
        formSlot: true,
        // align: 'right', // align: 'right', 支持left/center/right位置更改，默认left
      },
      {
        label: "address",
        prop: "address",
        search: true,
        hide: true, // 状态为true表格栏隐藏, 默认显示
        searchType: "input", // 定义搜索组件的类型
        placeholder: "请输入", // 占位符
        align: "center",
      },
    ],
  };
});

// 查看方法
function view(row, done) {
  console.log("row:查看方法", row);
  done();
}

// 新增
function rowSave(row, done) {
  console.log("新增", row);
  done();
}

// 编辑方法
function rowUpdate(row, done) {
  console.log("row:编辑方法", row);
  done();
}
// 删除方法
function rowDel(row, index) {
  console.log("row:删除方法", row);

  ElMessageBox.confirm("确认需要删除?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    })
    .finally(() => {});
}

// 多选方法
function handleSelectionChange(value) {
  // console.log("arud ====", arud.value);
  arud.value.multipleTableRef.clearSelection();
}

// 获取单选
function handleRadioChange(row, index) {
  console.log("row ====", row, index);
  raidoCount.value = index;
}

function handleDown(row) {
  console.log("下载", row);
}

// 初始化
function getTtsList() {
  // xxx()
  //   .then((res) => {})
  //   .catch((err) => {})
  //   .finally(() => {
  //     hasRequest.value = true;
  //   });
}

// 搜索按钮
function onQuery() {
  console.log("searchForm", searchForm.value);
}

// 重置按钮
function onReset() {}
</script>

<style lang="scss" scoped>
:deep(.el-radio__label) {
  display: none;
}
</style>
